<template>
	<el-container>
		<el-header :style="{backgroundImage:'url('+require('../../../static/imags/head_bg.png')+')'}">
			<el-row :gutter="20">
				<el-col :span="4">
					<img :src="logoUrl" />
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple">&nbsp;</div>
				</el-col>
				<el-col :span="4">
					<div class="font-14">llz系统欢迎<span class="">{{user.userName}}</span>进入系统</div>
				</el-col>
				<el-col :span="2">
					<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#276e97" text-color="#fff" active-text-color="#ffd04b">
						<el-submenu index="2">
							<template slot="title">个人中心</template>
							<el-menu-item index="message">消息中心</el-menu-item>
							<el-menu-item index="userInfo">个人信息</el-menu-item>
							<el-menu-item index="modifyPassword">密码修改</el-menu-item>
							<!--<el-submenu index="2-4">
								<template slot="title">选项4</template>
								<el-menu-item index="2-4-1">选项1</el-menu-item>
								<el-menu-item index="2-4-2">选项2</el-menu-item>
								<el-menu-item index="2-4-3">选项3</el-menu-item>
							</el-submenu>-->
						</el-submenu>
					</el-menu>
				</el-col>
				<el-col :span="2">
					<el-button class="iconfont icon-tuichu font-12" type="type" size="mini" @click="outLogin">退出登录</el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside :class="{'el-aside-active':isCollapse}">
				<!--<div class="collapse" @click="isCollapse = !isCollapse"></div>-->
				<el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" background-color="#272c3a" text-color="#fff" active-text-color="#ffd04b">
					<el-submenu :index="i+''" v-for="(menu , i ) in menus" v-show="menu.childrenMenu.length > 0">
						<template slot="title">
							<i :class="menu.icon"></i>
							<span>{{menu.label}}</span>
						</template>
						<el-submenu :index="i+'-'+j" v-for="(submenu , j) in menu.childrenMenu" v-show="submenu.childrenMenu.length > 0">
							<template slot="title">
								<i :class="submenu.icon"></i>
								<span>{{submenu.label}}</span>
							</template>
							<el-menu-item :index="i+'-'+j+'-'+k" @click="itemClick(i+'-'+j+'-'+k,ssm)" v-for="(ssm , k) in submenu.childrenMenu">
								<i :class="ssm.icon"></i>
								<span>{{ssm.label}}</span>
							</el-menu-item>
						</el-submenu>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<el-tabs class="tab-heaser" v-model="activeTab" type="card" closable @tab-remove="removeTab">
					<el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.title" :name="item.name">
					</el-tab-pane>
				</el-tabs>
				<div class="content">
					<keep-alive>
						<router-view></router-view>
					</keep-alive>
				</div>
			</el-main>
		</el-container>
		<el-dialog title="修改密码" :visible.sync="modifyPassword">
			<el-form class="demo-ruleForm" :model="userInfo" ref="userInfo" label-width="100px" style="text-align: left" status-icon :rules="rules">
				<el-form-item label="用户名" prop="">
					<el-input type="text" v-model="user.userName" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="用户密码" prop="password">
					<el-input type="password" v-model="userInfo.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword">
					<el-input type="password" v-model="userInfo.newPassword" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="新确认密码" prop="checkNewPassword">
					<el-input type="password" v-model="userInfo.checkNewPassword"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm(userInfo)" size="small" :loading="newSaveButtonStatus">提交修改</el-button>
			</div>

		</el-dialog>
	</el-container>
</template>

<style>
	@import url("main.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		name: 'Main',
		data: function() {
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('原始密码不能为空'));
				} else {
					callback();
				}
			};
			var validateNewPassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('新密码不能为空'));
				} else if(value == this.userInfo.password) {
					callback(new Error('新密码不能与原始密码相同'));
				} else {
					callback();
				}
			};
			var validateCheckNewPassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('确认密码不能为空'));

				} else if(value !== this.userInfo.newPassword) {
					callback(new Error('新密码确认密码不一致'));
				} else {
					callback();
				}
			};
			return {
				isCollapse: false,
				logoUrl:require('../../../static/imags/system-logo.png'),
				activeTab: '1',
				tabs: [{
					name: '1',
					title: '工作台',
					url: 'welcome'
				}],
				menus: [],
				user: null,
				userInfo: {
					password: '',
					newPassword: '',
					checkNewPassword: ''
				},
				modifyPassword: false,
				newSaveButtonStatus: false,
				rules: {
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						validator: validateNewPassword,
						trigger: 'blur'
					}],
					checkNewPassword: [{
						required: true,
						validator: validateCheckNewPassword,
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getMenu();
			this.user = this.utils.getJsonObject('user');
		},
		methods: {
			outLogin: function() {
				var _self = this;
				_self.utils.ajaxJSON({
					url: 'user/outLogin',
					type: 'POST',
					data: {
						userCode: _self.user.userCode
					},
					success: function(res) {
						if(res.status == 200) {
							_self.$router.push({
								path: '/login'
							});
						}
					}
				})
			},
			getMenu() {
				var _self = this;
				this.utils.get({
					url: 'menu/tree',
					success: function(res) {
						_self.menus = res;
					}
				})
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			itemClick(name, ssm) {
				//打开新页面之前先判断 这个页面是否已经被打开了 若是已经被打开了，就支架显示 若是没有打开就打开
				for(var index in this.tabs) {
					var tab = this.tabs[index];
					if(name == tab.name) {
						this.activeTab = name;
						return;
					}
				}
				this.tabs.push({
					name: name,
					title: ssm.label,
					url: ssm.url
				});
				this.activeTab = name;
			},
			removeTab(targetName) {
				if(targetName == '1') {
					this.$message({
						type: 'warning',
						message: '欢迎页不能删除'
					});
					return;
				}
				var currentIndex = 0;
				for(var index in this.tabs) {
					var item = this.tabs[index];
					if(targetName == item.name) {
						this.tabs.splice(index, 1);
						currentIndex = index;
						break;
					}
				}
				//重新路由到被删除者 下标的位置
				var currentTab;
				if(currentIndex >= this.tabs.length) {
					currentTab = this.tabs[currentIndex - 1];
				} else {
					currentTab = this.tabs[currentIndex];
				}
				console.log(JSON.stringify(currentTab))
				this.activeTab = currentTab.name;
			},
			handleSelect(key, keyPath) {
				if(key == 'modifyPassword') {
					this.modifyPassword = true;

				} else if(key == 'userInfo') {
					this.tabs.push({
						name: 'userInfo',
						title: "用户信息",
						url: 'userInfo'
					});
					this.activeTab = 'userInfo';
				}
			},
			submitForm(userInfo) {
				var _self = this;
				userInfo['userCode'] = _self.user.userCode;
				_self.$refs['userInfo'].validate((valid) => {
					if(valid) {
						_self.utils.ajaxJSON({
							type: 'POST',
							url: 'userManager/modifyPassword',
							data: userInfo,
							success: function(res) {
								if(res.status == 200) {
									_self.$confirm('密码已修改成功, 是否重新登录?', '警告', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning'
									}).then(() => {
										_self.outLogin();
									}).catch(() => {

									});
								}
							}
						})
					}
				});
			}
		},
		watch: {
			activeTab(newVal, oldVal) {
				for(var index in this.tabs) {
					var tab = this.tabs[index];
					if(newVal == tab.name) {
						console.log(JSON.stringify(tab))
						this.$router.push(tab.url);
						return;
					}
				}
			}
		},
		beforeRouteEnter(to, from, next) { //路由进入以后执行的方法。
//			document.title = to.meta.title;
			next();
		},
		beforeRouteLeave(to, from, next) { //路由离开以后执行的方法。
			//	        from.meta.keepAlive = true;
			//	        to.meta.keepAlive = false;
			next();
		}
	}
</script>